<template>
  <div class="container">
    <h1>新建区域</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)"/>
    <span>基础信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>区域名称</span>
        </div>
        <div class="input-right">
          <el-input v-model="region_name" placeholder="请输入"/>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>区域编号</span>
        </div>
        <div class="input-right">
          <el-input v-model="region_no" placeholder="请输入"/>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>区域面积</span>
        </div>
        <div class="input-right">
          <el-input v-model="region_area" type="number" placeholder="请输入"/>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>车位数量</span>
        </div>
        <div class="input-right">
          <el-input v-model="car_position_num" type="number" placeholder="请输入"/>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>备注</span>
        </div>
        <div class="input-right">
          <el-input
              v-model="remark"
              :rows="5"
              type="textarea"
          />
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="addOrUpdate">提交</el-button>
        <el-button type="default" @click="to('car/region')">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import to from "@/utils/to.js";
import axios from "axios"; // 引入 axios 用于发送 HTTP 请求
import {ElMessage} from "element-plus"; // 引入 Element Plus 的消息提示
import {useRoute} from "vue-router";

const route = useRoute();
const id = route.params.id || route.query.id;

// 定义表单数据
const region_name = ref("");
const region_no = ref("");
const region_area = ref("");
const car_position_num = ref("");
const remark = ref("");

// 提交车辆数据到后端
const addOrUpdate = async () => {
  const vehicleData = {
    name: region_name.value,
    no: region_no.value,
    area: region_area.value,
    vehicleNum: car_position_num.value,
    notes: remark.value,
    id: id ? id : 0,  // 如果是编辑，使用 id，否则传 0 进行新增
  };

  try {
    let response;
    if (id === undefined || id === "") {
      // 发送 POST 请求到后端接口
      response = await axios.post(
          "http://localhost:8080/vehicleRegion/add",

            vehicleData,{
            headers: {
              Authorization: localStorage.getItem("token"),
            },
          }
      );
    } else {
      response = await axios.put(
          "http://localhost:8080/vehicleRegion/update",

          vehicleData, {
            headers: {
              Authorization: localStorage.getItem("token"),
            },
          }
      );
    }
    // 判断请求是否成功
    if (response.status === 200) {
      // 显示成功提示
      ElMessage.success("区域添加成功!");
      // 延迟跳转到区域列表页面
      setTimeout(() => {
        to('car/region'); // 使用你原本的返回方法
      }, 2000); // 延迟 2 秒跳转，给用户一点时间看到提示信息
    }
  } catch (error) {
    // 显示错误提示
    ElMessage.error("添加失败!");
    console.error(error);
  }
};

const tableData = ref([]);

const get = async () => {
  if (!id) {
    console.error("没有id");
    return;
  }
  try {
    const response = await axios.get(
        `http://localhost:8080/vehicleRegion/selectDetails`,
        {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
          params: {
            id
          },
        }
    );
    // 检查返回的数据
    if (response && response.data) {
      const data = response.data.data; // 假设有效数据在 response.data
      region_name.value = data.name || "";
      region_no.value = data.no || "";
      region_area.value = data.area || "";
      car_position_num.value = data.vehicleNum || "";
      remark.value = data.notes || "";
      console.log(data);
    } else {
      console.error("后端数据为空");
    }
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  get();
});
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 300px;
}
</style>
